<script setup>
import { onBeforeMount, ref } from 'vue'
// import { showToast } from 'vant'
// import router from '@/router'
import { getSearchmovie } from '@/api/zeng.js'
// 路由参数 的接收
import { useRoute,useRouter } from 'vue-router'
const router = useRouter();
const route = useRoute()
const searchmovie = ref(null)
const val = route.query.val

onBeforeMount(() => {
  // 你可以在这里进行数据的初始化等操作
})

// 调用 API 获取数据
getSearchmovie(val).then((res) => {
  // console.log('getSearchmovie', res.data.movies)
  searchmovie.value = res.data.movies
})


// 跳转到电影详情页
const film=(movie)=>{
    router.push({
        path: '/fil',
        query: {
            movieId: movie.id
        }
    })
}

</script>
<template>
  <div style="box-sizing: border-box">
    <header>
      <div class="back" @click="$router.back()">
        <van-icon name="arrow-left" size="30" color="#fff" />
      </div>
      <div class="title">猫眼电影</div>
    </header>

    <main>
      <!-- 电影列表 -->
      <div class="list" v-if="searchmovie">
        <div @click="film(movie)" v-for="movie in searchmovie" :key="movie.id" class="listItem">
          <div>
            <van-image width="64rem" height="96rem" fit="cover" :src="movie.img" />
          </div>
          <div class="content">
            <div class="title-box">
              <span class="name text-ellipsis">{{ movie.nm }}</span>
              <span class="icon" v-if="movie.version === 'v3d imax'"
                ><van-image
                  width="60rem"
                  height="auto"
                  fit="cover"
                  class="img"
                  src="https://obj.pipi.cn/festatic/apollo/resources/images/search/img/base64/v3dimax.png"
              /></span>
              <span class="icon" v-else-if="movie.version === 'v2d imax'"
                ><van-image
                  width="60rem"
                  height="auto"
                  class="img"
                  fit="cover"
                  src="https://obj.pipi.cn/festatic/apollo/resources/images/search/img/base64/v2dimax.png"
              /></span>
            </div>
            <p class="text-ellipsis">{{ movie.enm }}</p>
            <p class="text-ellipsis">{{ movie.cat }}</p>
            <p class="text-ellipsis">{{ movie.rt }}</p>
            <div class="buy" v-if="movie.showStateButton">购票</div>
          </div>
          <div>
            <p v-if="movie.sc">
              <span class="score">{{ movie.sc }}</span
              >分
            </p>
            <p v-else>暂无评分</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
    

<style lang="less" scoped>
header {
  background-color: #fff;
  border-bottom: 1px solid #00000018;
  position: relative;

  .back {
    position: absolute;
    left: 10rem;
    top: 12rem;
  }

  .title {
    background-color: #e54847;
    font-size: 18rem;
    text-align: center;
    height: rem;
    padding: 0.12rem;
    color: #fff;
    height: 50rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
.list {
  background-color: #fff;
  padding: 12rem;
  .listItem {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8rem 0;
    border-bottom: 1px solid #00000018;
    position: relative;
    .buy {
      position: absolute;
      bottom: 25rem;
      right: 0;
      font-size: 14rem;
      font-weight: 500;
      color: white;
      background-color: #f60026;
      padding: 6rem 12rem;
      border-radius: 20rem;
    }
    .content {
      width: 60%;

      .title-box {
        display: flex;
        align-items: center;
        .name {
          display: block;
          max-width: 80%;
          font-size: 17rem;
          color: #333;
          font-weight: 700;
          margin: 6rem 0;
        }
        .icon {
          margin-left: 10rem;
        }
      }

      p {
        font-size: 13rem;
        color: #666;
        margin: 0;
        margin-top: 6rem;
      }
    }

    p {
      font-size: 12rem;
      color: #faaf00;

      .score {
        font-weight: 700;
        font-size: 15rem;
        margin-left: 4rem;
      }
    }
  }
}
// 单行文本溢出
.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>    